<template>
  <div class="container">
    <header-nav></header-nav>
    <!-- 页面整体内容 -->
    <div class="content-box">
      <!-- 面包屑 -->
      <div class="nav">
        <span @click="$router.push('/')">首页</span>>
        <span>政策解读</span>
      </div>
      <!-- 地区选择 -->
      <div class="select-address-box">
        <div class="select-box">
          <div class="select-list">
            <!-- 省级 -->
            <div class="select-item flex flex-start">
              <div class="item-lable">地区：</div>
              <div v-if="provinceLevel > -1" class="item-info" ref="policyMore">
                <span class="active">
                  {{ regionData[provinceLevel].province }}
                  <img
                    src="@/static/image/region_cha.png"
                    @click="provinceEmpty"
                  />
                </span>
              </div>
              <div v-else class="item-info" ref="policyMore">
                <span @click="provinceActive(-1)" :class="provinceLevel == -1 ? 'active' : ''">全部</span>
                <span
                  :class="provinceLevel == index ? 'active' : ''"
                  v-for="(item, index) in regionData"
                  :key="index"
                  @click="provinceActive(index)"
                >{{ item.province }}</span>
              </div>
              <div
                v-if="provinceLevel == -1 && judgeWords(regionData, 1)"
                class="more"
                @click="MoreEvent('policyMore')"
              >
                <span ref="policyMore1">更多</span>
                <img ref="policyMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
            <!-- 市级 -->
            <div v-if="provinceLevel > -1" class="select-item flex flex-start">
              <div class="item-lable"></div>
              <div v-if="cityLevel > -1" class="item-info" ref="cityMore">
                <span class="active">
                  {{ regionData[provinceLevel].city[cityLevel].name }}
                  <img
                    src="@/static/image/region_cha.png"
                    @click="cityEmpty"
                  />
                </span>
              </div>
              <div v-else class="item-info" ref="cityMore">
                <span @click="cityActive(-1)" :class="cityLevel === -1 ? 'active' : ''">全部</span>
                <span
                  @click="cityActive(index)"
                  :class="cityLevel === index ? 'active' : ''"
                  v-for="(item, index) in regionData[provinceLevel].city"
                  :key="index"
                >{{ item.name }}</span>
              </div>
              <div
                v-if="cityLevel === -1 && judgeWords(regionData[provinceLevel].city, 2)"
                class="more"
                @click="MoreEvent('cityMore')"
              >
                <span ref="cityMore1">更多</span>
                <img ref="cityMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
            <!-- 地区 -->
            <div v-if="cityLevel > -1" class="select-item flex flex-start">
              <div class="item-lable"></div>
              <div class="item-info" ref="areaMore">
                <span @click="areaActive(-1)" :class="areaLevel === -1 ? 'active' : ''">全部</span>
                <span
                  :class="areaLevel === index ? 'active' : ''"
                  v-for="(item, index) in regionData[provinceLevel].city[cityLevel].area"
                  :key="index"
                  @click="areaActive(index)"
                >{{ item }}</span>
              </div>
              <div
                v-if="judgeWords(regionData[provinceLevel].city[cityLevel].area,3)"
                class="more"
                @click="MoreEvent('areaMore')"
              >
                <span ref="areaMore1">更多</span>
                <img ref="areaMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
          </div>
          <!-- 部门 -->
          <div class="select-list">
            <div class="select-item flex flex-start">
              <div class="item-lable">受理部门：</div>
              <div class="item-info" ref="deparMore">
                <span @click="departActive('',-1)" :class="departLevel === -1 ? 'active' : ''">全部</span>
                <span
                  :class="departLevel === index ? 'active' : ''"
                  v-for="(item, index) in departmentData"
                  :key="index"
                  @click="departActive(item.id,index)"
                >{{ item.departmentName }}</span>
              </div>
              <div v-if="judgeWords(departmentData,4)" class="more" @click="MoreEvent('deparMore')">
                <span ref="deparMore1">更多</span>
                <img ref="deparMore2" src="@/static/image/triangle.png" />
              </div>
            </div>
          </div>
          <!-- 截止时间 -->
          <div class="select-list">
            <div class="select-item flex flex-start">
              <div class="item-lable">截止时间：</div>
              <div class="item-info">
                <span @click="timeActive('',-1)" :class="timeLevel === -1 ? 'active' : ''">全部</span>
                <span
                  :class="timeLevel === index ? 'active' : ''"
                  v-for="(item, index) in timeData"
                  :key="index"
                  @click="timeActive(item,index)"
                >{{ item }}天内截止</span>
              </div>
            </div>
          </div>
          <!-- 下载 -->
          <div class="select-list">
            <div class="select-item flex flex-start">
              <div class="item-lable">下载：</div>
              <div class="item-info">
                <span @click="downActive()" :class="whetherCanExport !== 1 ? 'active' : ''">全部</span>
                <span @click="downActive(1)" :class="whetherCanExport === 1 ? 'active' : ''">可下载</span>
              </div>
            </div>
          </div>
          <!-- 输入框搜索 -->
          <div class="select-list">
            <div class="select-item flex space-between">
              <div class="select-input flex">
                <div class="item-lable">关键字：</div>
                <div class="key-input flex items-middle">
                  <input placeholder="请输入关键字" v-model="searchKey" />
                  <span @click="getList(1)">搜索</span>
                </div>
              </div>
              <div v-show="isShowError" class="policy-map" @click="$router.push('/policyMap')">政策图谱</div>
              <div
                v-show="!isShowError"
                class="policy-map"
                @click="$router.push('/fenPolicyMap')"
              >政策图谱</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="list-container">
        <div class="list-header flex items-middle">
          <div class="depart lable">项目名称</div>
          <div class="data lable">受理部门</div>
          <div class="data lable">地区</div>
          <div class="time lable">申报时间</div>
          <div class="time lable">申报条件</div>
        </div>
        <div v-show="notYet" v-loading="loading" class="list-content-box">
          <div class="list-item flex items-middle" v-for="(item, index) in listData" :key="index">
            <div class="depart-info item-info flex items-middle">
              <!-- @click="noticeDetails(item.id, index)" -->
              <a
                :href="item.entranceUrl ? item.entranceUrl : '/gUDetails/'+item.id"
                target="blank"
                v-html="searchHighlight(item.title)"
              ></a>
              <img v-if="item.whetherCanExport===1" src="../../static/image/down.png" />
            </div>
            <div class="data-info item-info">
              <p
                @click="toDepartDetail(item.departmentId)"
                :title="item.departmentName"
              >{{ item.departmentName }}</p>
            </div>
            <div class="data-info item-info">{{ item.address }}</div>
            <div
              class="time-info item-info"
            >{{ (item.declareTime || '') + " - " + (item.deadline || '') }}</div>
            <div class="time-info item-info">{{ item.declareCondition}}</div>
          </div>
        </div>
        <no-data v-show="!notYet"></no-data>
      </div>
      <!-- 分页 -->
      <div class="page-content">
        <paging ref="page" @CurrentPage="changePageNo" :total="total" :pageNo="pageNo"></paging>
      </div>
    </div>
    <navigation />
    <footer-nav></footer-nav>
  </div>
</template>
<script>
import {
  getAllDepartmentArea,
  getAllDepartmentAreaSsr,
  interpretList,
  interpretListSsr,
  queryPolicyInterpretAcceptDepartment,
  queryPolicyInterpretAcceptDepartmentSsr,
  cancelAttention,
  departmentAttention,
  getSubInfo,
  getSubInfoSsr,
  queryRegionInfo,
  queryRegionInfoSsr
} from "../../api/api.js";
import { getCode } from "../../util/address.js"; //地区转换编码函数
import { sessionTake } from "../../util/validate.js";
import noData from "../../components/NoData"; //升级vip弹窗
import paging from "../../components/PageQuery.vue";
export default {
  name: "policyNotice",
  components: { noData, paging },
  data() {
    return {
      regionData: [], //地区数据
      provinceLevel: -1, // 省级选中
      cityLevel: -1, // 市级选中
      areaLevel: -1, // 区级选中
      departLevel: -1, // 部门
      timeLevel: -1, // 时间
      whetherCanExport: 0, //下载
      departmentData: [], //部门数据
      departmentId: "",
      timeData: ["7", "30"],
      searchKey: "", // 关键字
      closeDay: "", // 截止天数
      listData: [], // 列表数据
      total: 0, //列表总数

      pageNo: 1,
      loading: true, // 显示loading
      notYet: true,
      provinceName: "",
      cityName: ""
    };
  },
  computed: {
    // 是否展示取消选择地区图标
    isShowError() {
      let params = this.$store.state.cityInfo;
      if (params.city === "" && params.province === "") {
        return true;
      } else {
        return false;
      }
    }
  },
  head() {
    return {
      title: "政策解读-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "政策解读，地区" },
        {
          hid: "description",
          name: "description",
          content: "各个地区的政策解读"
        }
      ]
    };
  },
  async asyncData({ store, route }) {
    let provinceName = route.params.province;
    let cityName = route.params.city;

    let searchValue = route.query.value || "";
    let provinceLevel = -1; // 省级选中
    let cityLevel = -1; // 市级选中
    let areaLevel = -1;
    // let needDept = 1 //是否需要掉部门接口
    let regionData = []; //地区数据
    let departmentData = []; //部门数据
    let resultData = []; //列表数据
    let total = 0;
    let loading = true;
    let notYet = true;

    let areaData;
    // if(process.server){
    // 	areaData = await getAllDepartmentAreaSsr(1);
    // }else{
    areaData = await getAllDepartmentArea(1);
    // }
    if (areaData.code === 200) {
      regionData = areaData.result;
      if (provinceName && cityName) {
        for (let i = 0; i < regionData.length; i++) {
          if (regionData[i].province == provinceName) {
            provinceLevel = i;
            for (let q = 0; q < regionData[i].city.length; q++) {
              if (regionData[i].city[q].name == cityName) {
                cityLevel = q;
                break;
              } else if (q + 1 == regionData[i].city.length) {
                break;
              }
            }
          } else if (i + 1 == regionData.length) {
            break;
          }
        }
      }

      let substation;
      // if(process.server){
      // 	substation = await getSubInfoSsr();
      // }else{
      substation = await getSubInfo();
      // }
      if (substation.result.city !== "" && substation.result.province !== "") {
        let areaParams = {
          province: substation.result.province,
          city: substation.result.city,
          type: 2
        };
        let areaData;
        // if(process.server){
        // 	areaData = await queryRegionInfoSsr(areaParams);
        // }else{
        areaData = await queryRegionInfo(areaParams);
        // }
        let city1 = { province: "国家" };
        let city2 = {
          province: substation.result.province,
          city: [
            {
              name: substation.result.city,
              area: areaData.result
            }
          ]
        };
        let cityArr = [];
        cityArr.push(city1);
        cityArr.push(city2);
        regionData = cityArr;
        provinceLevel = 1;
        cityLevel = 0;
      }

      // console.log(5555555, regionData);

      let provinceValue = "";
      let cityValue = "";
      let areaValue = "";
      let departmentNameValue = "";
      if (provinceLevel > -1) {
        provinceValue = regionData[provinceLevel].province;
      }
      if (cityLevel > -1) {
        cityValue = regionData[provinceLevel].city[cityLevel].name;
      }
      if (areaLevel > -1) {
        areaValue = regionData[provinceLevel].city[cityLevel].area[areaLevel];
      }
      // 列表接口
      let params = {
        pageNo: 1,
        closeDay: "",
        departmentId: departmentNameValue,
        province: provinceValue,
        area: areaValue,
        city: cityValue,
        title: searchValue
      };
      for (const key in params) {
        if (!String(params[key]).length) delete params[key];
      }
      let listData;
      // if(process.server){
      // 	listData = await interpretListSsr(params);
      // }else{
      listData = await interpretList(params);
      // }
      if (listData.code === 200) {
        resultData = listData.result.records;
        total = listData.result.total;
        loading = false;
        if (resultData.length == 0) {
          notYet = false;
        }
      }

      if (areaValue !== "") {
        provinceValue = "";
        cityValue = "";
      }
      if (cityValue !== "") {
        provinceValue = "";
      }
      // 部门接口
      let deParams = {
        province: provinceValue,
        city: cityValue,
        area: areaValue
      };
      let deData;
      // if(process.server){
      // 	deData = await queryPolicyInterpretAcceptDepartmentSsr(deParams);
      // }else{
      deData = await queryPolicyInterpretAcceptDepartment(deParams);
      // }
      departmentData = deData.result;
    }

    return {
      regionData: regionData,
      listData: resultData,
      departmentData: departmentData,
      provinceLevel: provinceLevel,
      cityLevel: cityLevel,
      searchKey: searchValue,
      total: total,
      loading: loading,
      notYet: notYet
    };
  },
  created() {
    this.getArea();
  },
  mounted() {
    // this.$refs.page.totalValue(this.total)
  },
  methods: {
    async getArea() {
      let substation = await getSubInfo();
      if (substation.result.city !== "" && substation.result.province !== "") {
        let areaParams = {
          province: substation.result.province,
          city: substation.result.city,
          type: 2
        };
        let areaData = await queryRegionInfo(areaParams);
        // console.log("areaData", areaData);
        let city1 = { province: "国家" };
        let city2 = {
          province: substation.result.province,
          city: [
            {
              name: substation.result.city,
              area: areaData.result
            }
          ]
        };
        let cityArr = [];
        cityArr.push(city1);
        cityArr.push(city2);
        this.regionData = cityArr;
        this.provinceLevel = 1;
        this.cityLevel = 0;
      }
      // console.log(88888888888, this.regionData);
    },
    // 更多收起切换
    MoreEvent(value) {
      if (this.$refs[value + "1"].innerHTML === "更多") {
        this.$refs[value + "1"].innerHTML = "收起";
        this.$refs[value].style.maxHeight = "inherit";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(180deg)";
      } else {
        this.$refs[value + "1"].innerHTML = "更多";
        this.$refs[value].style.maxHeight = "32px";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(0deg)";
      }
    },
    // 省级清空
    provinceEmpty() {
      this.provinceLevel = -1;
      this.cityLevel = -1;
      this.areaLevel = -1;
      this.getList(1);
      this.departmentList();
    },
    // 省级地区切换
    provinceActive(index) {
      this.provinceLevel = index;
      this.getList(1);
      this.departmentList();
    },
    // 市级清空
    cityEmpty() {
      this.cityLevel = -1;
      this.areaLevel = -1;
      this.getList(1);
      this.departmentList();
    },
    // 市级地区切换
    cityActive(index) {
      this.cityLevel = index;
      this.getList(1);
      this.departmentList();
    },
    // 区级地区切换
    areaActive(index) {
      this.areaLevel = index;
      this.getList(1);
      this.departmentList();
    },
    // 部门切换
    departActive(id, index) {
      this.departLevel = index;
      this.departmentId = id;
      this.getList(1);
    },
    // 截止时间切换
    timeActive(item, index) {
      this.closeDay = item;
      this.timeLevel = index;
      this.getList(1);
    },
    // 下载切换
    downActive(index) {
      this.whetherCanExport = index;
      this.getList(1);
    },
    // 跳转详情
    noticeDetails(id, index) {
      window.open(`/gUDetails/${id}`);
    },
    // 跳转部门详情列表
    toDepartDetail(id) {
      window.open(`/departmentInside?id=${id}`, "_blank");
    },
    // 搜索高亮
    searchHighlight(val) {
      if (this.searchKey === "") {
        return val;
      } else {
        return val.replace(
          new RegExp(this.searchKey, "g"),
          "<em style='color: red;font-style:normal;'>" +
            this.searchKey +
            "</em>"
        );
      }
    },
    // 切换分页
    changePageNo(value) {
      this.pageNo = value;
      this.getList();
    },
    // 列表接口
    async getList(type) {
      if (type) {
        this.pageNo = 1;
      }
      let provinceValue = "";
      let cityValue = "";
      let areaValue = "";
      let departmentNameValue = "";
      if (this.provinceLevel > -1) {
        provinceValue = this.regionData[this.provinceLevel].province;
      }
      if (this.cityLevel > -1) {
        cityValue = this.regionData[this.provinceLevel].city[this.cityLevel]
          .name;
      }
      if (this.areaLevel > -1) {
        areaValue = this.regionData[this.provinceLevel].city[this.cityLevel]
          .area[this.areaLevel];
      }
      let params = {
        pageNo: this.pageNo,
        closeDay: this.closeDay,
        departmentId: this.departmentId,
        province: provinceValue,
        area: areaValue,
        city: cityValue,
        title: this.searchKey,
        whetherCanExport: this.whetherCanExport
      };
      for (const key in params) {
        if (!String(params[key]).length) delete params[key];
      }
      let listData = await interpretList(params);
      if (listData.code === 200) {
        this.listData = listData.result.records;
        this.total = listData.result.total;
        // 传总页数
        // this.$refs.page.totalValue(this.total)
        this.loading = false;
        if (this.listData.length === 0) {
          this.notYet = false;
        } else {
          this.notYet = true;
        }
        // console.log(this.listData);
      }
    },
    // 部门接口
    async departmentList() {
      let provinceValue = "";
      let cityValue = "";
      let areaValue = "";
      if (this.provinceLevel > -1) {
        cityValue = null;
        areaValue = null;
        provinceValue = this.regionData[this.provinceLevel].province;
      }
      if (this.cityLevel > -1) {
        provinceValue = null;
        areaValue = null;
        cityValue = this.regionData[this.provinceLevel].city[this.cityLevel]
          .name;
      }
      if (this.areaLevel > -1) {
        provinceValue = null;
        cityValue = null;
        areaValue = this.regionData[this.provinceLevel].city[this.cityLevel]
          .area[this.areaLevel];
      }
      // 部门接口
      let deParams = {
        province: provinceValue,
        city: cityValue,
        area: areaValue
      };
      const deData = await queryPolicyInterpretAcceptDepartment(deParams);
      this.departmentData = deData.result;
    },
    // 判断字符长度，是否要展示折叠
    judgeWords(data, index) {
      if (data == undefined) {
        return false;
      }
      // 1省级2市级3区级4部门
      if (index == 1) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].province;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 2) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].name;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 3) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i];
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 4) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].departmentName;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped src="../policyInformation/policyNotice.less"></style>
